import React from "react";
import PropTypes from "prop-types";
import CommentForm from "./CommentForm";
import CommentList from "./CommentList";
import "../CSS/Comment.css";

function Comment(props) {
    const { blogInfo, postComment, comments } = props;
    return (
        <>
            <CommentForm
                postComment={postComment}
                blogInfo={blogInfo}
            />
            <CommentList comments={comments} />
        </>
    );
}

Comment.propTypes = {
    blogInfo: PropTypes.shape({
        _id: PropTypes.string,
        title: PropTypes.string,
    }).isRequired,
    postComment: PropTypes.func.isRequired,
    // eslint-disable-next-line react/forbid-prop-types
    comments: PropTypes.any,
};

Comment.defaultProps = {
    comments: [],
};

export default Comment;
